<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>
			Auto Complete
		</title>
		<style type="text/css">
			@import "style.css";
		</style>
		<script src="../../js/ext.main.domQuery.js" type="text/javascript"></script>
		<script src="../../js/aV.ext.string.js" type="text/javascript"></script>
		<script src="../../js/aV.ext.array.js" type="text/javascript"></script>
		<script src="../../js/aV.ext.object.js" type="text/javascript"></script>
		<script src="../../js/aV.ext.DOM.js" type="text/javascript"></script>
		<script src="../../js/aV.main.events.js" type="text/javascript"></script>
		<script src="../../js/aV.main.CSS.js" type="text/javascript"></script>
		<script src="../../js/aV.main.ajax.js" type="text/javascript"></script>
		<script src="../../js/aV.main.aParser.js" type="text/javascript"></script>
		<script src="../../js/aV.main.effect.js" type="text/javascript"></script>
		<script src="../../js/aV.plg.autoComplete.js" type="text/javascript"></script>
		<script type="text/javascript">
			function setAndLogHiddenInput(event)
			{
				document.getElementById("myHiddenInput").value=event.target.value;
				document.getElementById("myHiddenIdInput").value=event.target.aVautoComplete.list[event.selectedIndex].id;
				if (window.console)
					console.log(event, document.getElementById("myHiddenInput").value, document.getElementById("myHiddenIdInput").value);
			}
		</script>
		<style type="text/aVautoComplete">
			body>div>input[type = "text"]
			{
				source: 'auto_complete.php',
				params: '"table=" + document.getElementById("tableName").value + "&field=' + element.id + '&filter"'
			}
			#name2
			{
				source: 'names.txt',
				params: '',
				minChars: 0
			}
			#multiName, #staticList
			{
				filterPattern: "'([' + separator + ']|^)([^' + separator + ']*)'", /* this provides multiple entry support with , as seperator*/
				filterBackreferenceIndex: 2,
				separatorBackreferenceIndex: 1,
				force: true,
				selectOnExit: true,
				onselectitem: setAndLogHiddenInput /*this assigns an event handler to the onselectitem event to perform external operations*/
			}
			#staticList
			{
				onselectitem: undefined,
				source: undefined,
				params: undefined,
				list: ['Ahmet', 'Osman', 'Huseyin']
			}
		</style>
	</head>
	<body>
		Type in at least 2 characters in the first box and wait a while ;)
		Also try changing the "Name" to "Surname" :)
		<div id="left">
			<select id="tableName" onChange="document.getElementById('name').autoComplete.list=undefined;">
				<option value="0" SELECTED>Name</option>
				<option value="1">Surname</option>
			</select><br/>
			<div>Name<br/></div>
			<div>Multiple Names</div>
			<div>Static List</div>
		</div>
		<div id="right">
			<input type="text" id="name"/><br/>
			<input type="text" id="name2"/><br/>
			<input type="text" id="multiName"/><br/>
			<input type="text" id="staticList"/>
		</div>
		<input id="myHiddenInput" type="hidden"/>
		<input id="myHiddenIdInput" type="hidden"/>
	</body>
</html>
